<template>
    <view class="say_story">
        <view class="swipes">
            <swiper class="imageContainer" @change="handleChange"  previous-margin="50rpx" next-margin="50rpx" circular  autoplay>
                <block v-for="(item,index) in swiperList" :key="index">
                    <swiper-item class="swiperitem">
                        <image class="itemImg" :class="currentIndex == index ? 'swiperactive': ''" :src="item.img" lazy-load mode="scaleToFill"></image>
                    </swiper-item>
                </block>
            </swiper>
<!--            <bw-img-upload style="width:100%" ></bw-img-upload>-->
<!--            <bw-swiper :swiperList="swiperList" :swiperType="true" :duration="1000" :interval="3000" :indicatorDots="false" style="width:100%" class="swipers"></bw-swiper>-->
        </view>
        <view class="story_class">
            <view class="title">
                <view class="line_left"></view>
                <image src="/static/img/jingmei.png" class="jingmei"></image>
                <text>故事分类</text>
                <view class="line_right"></view>
            </view>
            <view class="lists">
                <view class="list_box">
                    <navigator url="../story/classification/index?id=0" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">文学畅销</view>
                    </navigator>
                    <navigator url="../story/classification/index?id=1" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">世界名著</view>
                    </navigator>
                </view>
                <view class="list_box">
                    <navigator url="../story/classification/index?id=2" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">童音儿歌</view>
                    </navigator>
                    <navigator url="../story/classification/index?id=3" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">国学经典</view>
                    </navigator>
                </view>
                <view class="list_box">
                    <navigator url="../story/classification/index?id=4" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">课文教材</view>
                    </navigator>
                    <navigator url="../story/classification/index?id=5" open-type="navigate" class="list">
                        <view class="img_box">
                            <image src="/static/img/gxjd.png" class="img"></image>
                        </view>
                        <view class="name">外语小课堂</view>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    // import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
    export default {
        name: "index",
        // components:{
        //     bwSwiper
        // },
        data() {
            return {
                currentIndex: 0,
                swiperList:[
                    {img: '/static/img/swipe.jpg',text:'加油1'},
                    {img: '/static/img/swipe.jpg',text:'加油2'},
                    {img: '/static/img/swipe.jpg',text:'加油3'}
                ]
            }
        },
        methods:{
            handleChange(e) {
                this.currentIndex = e.detail.current;
            }
        }
    }
</script>

<style lang="scss">
    .swipes{
        // 3D轮播样式
        .imageContainer {
            width: 100%;
            /* height: 500rpx; */
            /* background: #000; */
            height: 300upx;
            background-color: #fff;
        }

        .swiperitem {
            /* height: 500rpx; */
            height: 300upx;
            padding: 0upx 20upx;
            box-sizing: border-box;
            position: relative;
            .swiperText {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: absolute;
                top: 56upx;
                left: 51upx;
                z-index: 998;
                width:162upx;
                height:163upx;
                background:rgba(255,255,255,1);
                border-radius:8upx;
                padding:10upx;
                .name {
                    font-size:26upx;
                    font-weight:500;
                    color:rgba(253,57,91,1);
                    line-height:37upx;
                    margin-bottom: 10upx;
                }
                .zq,.cz {
                    font-size:20upx;
                    color:rgba(253,57,91,1);
                    line-height:35upx;
                }
                .addNl {
                    width:120upx;
                    height:26upx;
                    background:rgba(253,57,91,1);
                    border-radius:13upx;
                    font-size:20upx;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    text-align: center;
                    line-height: 26upx;
                    margin-top: 10upx;
                }

            }
        }

        .itemImg {
            position: absolute;
            width: 600upx;
            /* height: 380rpx; */
            height: 300upx;
            border-radius: 15rpx;
            z-index: 5;
            opacity: 0.7;
            top: 2%;
            box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
        }

        .swiperactive {
            width: 600upx;
            overflow: hidden;
            opacity: 1;
            z-index: 10;
            /* height: 430rpx; */
            height: 300upx;
            top: 0%;
            transition: all .2s ease-in 0s;
        }

    }
    .say_story {
        padding-top: 90upx;
        .story_class {
            padding: 0upx 55upx;
            .title {
                text-align: center;
                font-size: 30upx;
                color: $uni-color-664e37;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 40upx 0;
                .jingmei{
                    width: 100upx;
                    height: 50upx;
                    margin-right: 5upx;
                }
                .line_left,.line_right{
                    width: 165upx;
                    height: 2upx;
                    background-color: #e0e0e0;
                }
                .line_left{
                    margin-right: 37upx;
                }.line_right{
                    margin-left: 37upx;
                }
            }
            .lists {
                .list_box {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 30upx;
                    .list {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .img_box {
                            width: 300upx;
                            height: 300upx;
                            border-radius: 20upx;
                            box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);
                            overflow: hidden;
                            .img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .name {
                            font-size: $uni-font-size-base;
                            color: $uni-color-664e37;
                            line-height: 48upx;
                            padding-top: 12upx;
                        }
                    }
                }

            }
        }
    }
</style>